<template>
  <div class="dialog dialog-4 dialog-dom">
    <div ref="dialog4" class="dialogs" @touchstart="moveNext">
      <template v-for="(item, index) in dialogs.dialog4">
        <div
          v-if="dialogCurrent === index && item.type === 'dialog'"
          :key="index"
          class="animated fadeIn"
          :class="item.class + ' dialog' + (index + 1)"
        >
          <span>{{item.content}}</span>
        </div>
        <div
          v-else-if="dialogCurrent === index && item.type === 'action'"
          :key="index"
          :class="item.class + ' dialog' + (index + 1)"
        >
          <div class="animated shanzi">
            <!-- <div class=""> -->
            <img src="../assets/yushan.png" alt>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import dialogs from "../dialogs";

export default {
  name: "HelloWorld",
  props: ["dialogCurrent"],
  data() {
    return {
      dialogs
    };
  },
  watch: {
    dialogCurrent(val) {
      console.log("dialogCurrentWatch", val, dialogs.dialog4.length);
      // debugger
      if (val > dialogs.dialog4.length - 2) {
        // debugger
        this.$emit("move-next");
      }
      if (val > dialogs.dialog4.length - 3) {
        // debugger
        setTimeout(() => {
          this.$emit('move-next')
        }, 2000);
      }
    }
  },
  methods: {
    moveNext(e) {
      e.preventDefault();
      console.log("moveNext");
      this.$emit("move-next");
      // this.currentDialogs++
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-4 {
  .dialog1 {
    top: 0.77rem;
    left: 1.79rem;
    width: 1.7rem;
  }
  .dialog2 {
    width: 1.7rem;
    top: 1.58rem;
    left: 0.8rem;
  }
  .dialog3 {
    background: transparent;
    animation-duration: 2s;

    left: -0.2rem;
    top: 2.1rem;
    width: 0.2rem;
    height: 0.2rem;
  }
  @keyframes shanzi {
    0% {
      opacity: 0.1;
      left: -0.2rem;
      top: 2.1rem;
      width: 0.2rem;
      height: 0.2rem;
      -webkit-transform-origin: center;
      transform-origin: center;
      transform: translate3d(0, 0, 1, 0);
    }

    to {
      opacity: 1;
      width: 3rem;
      height: 3rem;
      left: 0.3rem;
      top: 0.5rem;
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, 390deg);
      transform: translate3d(0, 0, 1, 390deg);
    }
  }
  .shanzi {
    -webkit-animation-duration: 2.1s;
    animation-duration: 2.1s;
    -webkit-animation-name: shanzi;
    animation-name: shanzi;
  }

  // .dialog1 {
  //   background: #ffffff;
  //   width: 2rem;
  //   height: 1rem;
  //   animation-duration: 2.5s;
  //   position: absolute;
  //   top: 5.4rem;
  //   left: .1rem;
  //   width: 80%;
  //   // transform: translate(-50%, -50%);
  // }
}
</style>

